<!DOCTYPE>
<html>
    <body>
        <div class="auto-center">
            <p>这是一个段落</p>
            <h2>这是一个标题</h2>
            <a href="#">这是一个空链接</a>
        </div>
        <div class="abs-right">
            <p>这是一个段落</p>
            <h2>这是一个标题</h2>
            <a href="#">这是一个空链接</a>
        </div>
        <div class="float-left">
            <p>这是一个段落</p>
        </div>
        <div>
            <img class="auto" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
        </div>
        <div>
            <p class="p">这是一个标题</p>
            <div class="div">
                这是一个块元素
            </div>
            <img class="img" src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
            <span class="span">这是一个行内元素</span>
            <span class="span">这是一个行内元素2</span>
            <p><span class="spa">这</span>是另一个段落</p>
        </div>
        <div>
            <ul class="ul">
                <li class="li"><a class="a" href="#">这是一个空链接</a></li>
                <li class="li"><a class="a" href="#">这是一个空链接</a></li>
                <li class="li"><a class="a" href="#">这是一个空链接</a></li>
                <li class="li"><a class="a" href="#">这是一个空链接</a></li>
                <li class="li"><a class="a" href="#">这是一个空链接</a></li>
            </ul>
        </div>
        <div>
            <span style="cursor:auto">
                Auto</span><br />
                <span style="cursor:crosshair">
                Crosshair</span><br />
                <span style="cursor:default">
                Default</span><br />
                <span style="cursor:pointer">
                Pointer</span><br />
                <span style="cursor:move">
                Move</span><br />
                <span style="cursor:e-resize">
                e-resize</span><br />
                <span style="cursor:ne-resize">
                ne-resize</span><br />
                <span style="cursor:nw-resize">
                nw-resize</span><br />
                <span style="cursor:n-resize">
                n-resize</span><br />
                <span style="cursor:se-resize">
                se-resize</span><br />
                <span style="cursor:sw-resize">
                sw-resize</span><br />
                <span style="cursor:s-resize">
                s-resize</span><br />
                <span style="cursor:w-resize">
                w-resize</span><br />
                <span style="cursor:text">
                text</span><br />
                <span style="cursor:wait">
                wait</span><br />
                <span style="cursor:help">
                help</span>
                <!--改变光标-->
        </div>
        <p>媒介类型</p>
    </body>
    <body>
        <div class="img">
          <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
            <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160">
          </a>
          <div class="desc">描述</div>
        </div>
        <div class="img">
          <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
            <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160">
          </a>
          <div class="desc">描述</div>
        </div>
        <div class="img">
          <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
            <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160">
          </a>
          <div class="desc">描述</div>
        </div>
        <div class="img">
          <a target="_blank" href="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg">
            <img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" alt="Ballade" width="160" height="160">
          </a>
          <div class="desc">描述</div>
        </div>
    </body>
</html>
<style>
    .auto-center{
        margin: auto;
        margin-right:auto;
        width:70%;
        background-color:#b0e0e6;
    }
    /*可通过将左和右外边距设置为 "auto"，来对齐块元素*/
    .abs-right{
        position: absolute;
        right: 0;
        width: 500px;
        background: #b0e0e6;
    }
    /*对齐元素的方法之一是使用绝对定位,绝对定位元素会被从正常流中删除，并且能够交叠元素*/
    /*
    body{
        margin:0;
        padding:0;
    }
    .container{
        position:relative;
        width:100%;
    }
    .right{
        position:absolute;
        right:0px;
        width:300px;
        background-color:#b0e0e6;
    }
    body{
        margin:0;
        padding:0;
    }
    .container{
        position:relative;
        width:100%;
    }
    .right{
        position:absolute;
        right:0px;
        width:300px;
        background-color:#b0e0e6;
    }
    */
    /*跨浏览器兼容性问题:当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异*/
    .float-left{
        float:left;
        width:300px;
        background-color:#b0e0e6;
    }
    /*
    body{
        margin:0;
        padding:0;
    }
    .right{
        float:right;
        width:300px;
        background-color:#b0e0e6;
    }
    */
    /*跨浏览器兼容性问题:当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异*/
    .auto{
        height: auto;
        width: 100px;
    }
    .p {
        display: inline;
    }
    .div {
        display: none;
    }
    /*把元素显示为内联元素*/
    .span{
        display: block
    }
    /*把元素显示为块级元素*/
    .img{
        float: right ;
        height: 75px;
        border:1px dotted black;
        margin:0px 0px 15px 20px;
    }
    /*使图像浮动于段落的右侧。向图像添加边框和边界*/
    .spa{
        float:left;
        width:0.7em;
        font-size:400%;
        font-family:algerian,courier;
        line-height:80%;
    }
    /*使段落的首字母浮动于左侧，并向这个字母添加样式。*/
    .ul{
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
    }
    .a{
        float:left;
        width:7em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
    }
    .a:hover {
        background-color:#ff3300;
    }
    .li {
        display:inline;
    }
    /*使用具有一栏超链接的浮动来创建水平菜单*/
    /*
    clear	设置一个元素的侧面是否允许其他的浮动元素。
    cursor	规定当指向某元素之上时显示的指针类型。
    display	设置是否及如何显示元素。
    float	定义元素在哪个方向浮动。
    position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    visibility	设置元素是否可见或不可见。
    */
    div.img{
        margin:3px;
        border:1px solid #bebebe;
        height:auto;
        width:auto;
        float:left;
        text-align:center;/*对齐方式*/
    }
    div.img img{
        display:inline;
        margin:3px;
        border:1px solid #bebebe;
    }
    div.img a:hover img{
        border:1px solid #333333;
    }
    div.desc{
        text-align:center;
        font-weight:normal;/*字体*/
        width:150px;
        font-size:12px;
        margin:10px 5px 10px 5px;
    }

    img{
        opacity:0.4;
        filter:alpha(opacity=40);
    }/*鼠标移动前半透明状态*/
    img:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
    }/*鼠标移动后完全显示*/
    @media screen{
        p.test {font-family:verdana,sans-serif; font-size:14px}
    }
    @media print{
        p.test {font-family:times,serif; font-size:10px}
    }
    @media screen,print{
        p.test {font-weight:bold}
    }
    /*媒介类型允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等.媒介类型名称对大小写不敏感
    all	用于所有的媒介设备
    aural	用于语音和音频合成器
    braille	用于盲人用点字法触觉回馈设备
    embossed	用于分页的盲人用点字法打印机
    handheld	用于小的手持的设备
    print	用于打印机
    projection	用于方案展示，比如幻灯片
    screen	用于电脑显示器
    tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端
    tv	用于电视机类型的设备
    */
</style>